<template>
  <div class="space-analyze-container">
    <a-card title="空间分析" :bordered="false">
      <!-- 查询条件选择 (仅管理员显示) -->
      <div class="query-condition-form" v-if="userStore.isAdmin">
        <a-form :model="queryForm" layout="inline" @finish="handleQuery">
          <a-form-item label="分析范围">
            <a-radio-group v-model:value="queryForm.queryType" @change="handleQueryTypeChange">
              <a-radio-button value="space">我的空间</a-radio-button>
              <a-radio-button value="public">公共图库</a-radio-button>
              <a-radio-button value="all">全部空间</a-radio-button>
            </a-radio-group>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit" :loading="loading">
              <template #icon><BarChartOutlined /></template>
              分析数据
            </a-button>
          </a-form-item>
        </a-form>
      </div>

      <a-divider v-if="userStore.isAdmin" />

      <!-- 数据看板 -->
      <div class="dashboard-container" v-if="hasData">
        <a-row :gutter="[16, 16]">
          <!-- 空间使用情况 -->
          <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <a-card title="空间使用情况" size="small">
              <!-- 无限制空间：显示文字统计 -->
              <div
                v-if="!usageData?.maxSize && !usageData?.maxCount"
                class="usage-display-container"
              >
                <div class="usage-item" :class="{ animate: !loading }">
                  <div class="usage-icon storage-icon">
                    <div class="icon-circle">
                      <svg viewBox="0 0 24 24" fill="currentColor">
                        <path
                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                        />
                      </svg>
                    </div>
                  </div>
                  <div class="usage-content">
                    <div class="usage-label">存储大小</div>
                    <div class="usage-value storage-value" :class="{ 'count-up': !loading }">
                      {{ formatFileSize(usageData?.usedSize || 0) }}
                    </div>
                  </div>
                </div>

                <div class="usage-divider"></div>

                <div class="usage-item" :class="{ animate: !loading }">
                  <div class="usage-icon count-icon">
                    <div class="icon-circle">
                      <svg viewBox="0 0 24 24" fill="currentColor">
                        <path
                          d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"
                        />
                      </svg>
                    </div>
                  </div>
                  <div class="usage-content">
                    <div class="usage-label">图片数量</div>
                    <div class="usage-value count-value" :class="{ 'count-up': !loading }">
                      <span class="count-number">{{ usageData?.usedCount || 0 }}</span>
                      <span class="count-unit">张</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 有限制空间：显示使用率图表 -->
              <div v-else class="usage-chart-container">
                <v-chart
                  class="usage-chart"
                  :option="usageChartOption"
                  :loading="loading"
                  autoresize
                />
              </div>
            </a-card>
          </a-col>

          <!-- 图片分类情况 -->
          <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <a-card title="图片分类分布" size="small">
              <div class="category-chart-container">
                <v-chart
                  class="category-chart"
                  :option="categoryChartOption"
                  :loading="loading"
                  autoresize
                />
              </div>
            </a-card>
          </a-col>

          <!-- 图片大小分布 -->
          <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <a-card title="图片大小分布" size="small">
              <div class="size-chart-container">
                <v-chart
                  class="size-chart"
                  :option="sizeChartOption"
                  :loading="loading"
                  autoresize
                />
              </div>
            </a-card>
          </a-col>

          <!-- 标签词云 -->
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-card title="图片标签词云" size="small">
              <div class="tag-chart-container">
                <v-chart class="tag-chart" :option="tagChartOption" :loading="loading" autoresize />
              </div>
            </a-card>
          </a-col>

          <!-- 用户上传行为分析 -->
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-card title="用户上传趋势" size="small">
              <div class="user-behavior-form">
                <a-form layout="inline" style="margin-bottom: 16px">
                  <a-form-item label="时间维度">
                    <a-select
                      v-model:value="userAnalyzeForm.timeDimension"
                      style="width: 100px"
                      @change="handleTimeDimensionChange"
                    >
                      <a-select-option value="day">日</a-select-option>
                      <a-select-option value="week">周</a-select-option>
                      <a-select-option value="month">月</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-form>
              </div>
              <div class="user-chart-container">
                <v-chart
                  class="user-chart"
                  :option="userChartOption"
                  :loading="loading"
                  autoresize
                />
              </div>
            </a-card>
          </a-col>

          <!-- 空间排行榜 (仅管理员可见) -->
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="userStore.isAdmin">
            <a-card title="空间使用排行榜" size="small">
              <div class="rank-form" style="margin-bottom: 16px">
                <a-form layout="inline">
                  <a-form-item label="排行数量">
                    <a-input-number
                      v-model:value="rankForm.topN"
                      :min="1"
                      :max="50"
                      style="width: 100px"
                      @change="handleRankChange"
                    />
                  </a-form-item>
                </a-form>
              </div>
              <div class="rank-chart-container">
                <v-chart
                  class="rank-chart"
                  :option="rankChartOption"
                  :loading="loading"
                  autoresize
                />
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 无数据提示 -->
      <div class="no-data-container" v-else-if="!loading">
        <a-empty description="请选择查询条件后点击分析数据按钮" />
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import { BarChartOutlined } from '@ant-design/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart, ScatterChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
} from 'echarts/components'
import 'echarts-wordcloud'
import VChart from 'vue-echarts'
import { useUserStore } from '@/stores/user'
import { spaceAnalyzeApi } from '@/api/space-analyze'
import { listSpaceVOByPage } from '@/api/space'
import type {
  SpaceCategoryAnalyzeResponse,
  SpaceSizeAnalyzeResponse,
  SpaceTagAnalyzeResponse,
  SpaceUsageAnalyzeResponse,
  SpaceUserAnalyzeResponse,
} from '@/types/space-analyze'
import type { SpaceVO, Space } from '@/types/space'

// 注册ECharts组件
use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  ScatterChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
])

const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const spacesLoading = ref(false)
const hasData = ref(false)

// 查询表单
const queryForm = reactive({
  queryType: 'space' as 'space' | 'public' | 'all', // 默认都选择"我的空间"
  spaceId: undefined as string | undefined,
})

// 用户行为分析表单
const userAnalyzeForm = reactive({
  timeDimension: 'day' as 'day' | 'week' | 'month',
})

// 排行榜表单
const rankForm = reactive({
  topN: 10,
})

// 空间列表
const spaceList = ref<SpaceVO[]>([])

// 分析数据
const usageData = ref<SpaceUsageAnalyzeResponse | null>(null)
const categoryData = ref<SpaceCategoryAnalyzeResponse[]>([])
const sizeData = ref<SpaceSizeAnalyzeResponse[]>([])
const tagData = ref<SpaceTagAnalyzeResponse[]>([])
const userBehaviorData = ref<SpaceUserAnalyzeResponse[]>([])
const rankData = ref<Space[]>([])

// 图表配置（仅用于有限制的空间使用率展示）
const usageChartOption = computed(() => {
  if (!usageData.value) return {}

  const data = usageData.value

  // 如果没有maxSize和maxCount（全部空间或公共图库查询），不使用图表
  if (!data.maxSize && !data.maxCount) {
    return {}
  }

  // 有maxSize和maxCount时使用饼图展示使用率
  const sizeUsage = data.sizeUsageRatio || 0
  const countUsage = data.countUsageRatio || 0

  return {
    title: {
      text: '使用率',
      left: 'center',
      textStyle: { fontSize: 14 },
    },
    tooltip: {
      trigger: 'item',
      formatter: (params: { seriesIndex: number; value: number }) => {
        if (params.seriesIndex === 0) {
          return `大小使用率: ${params.value.toFixed(2)}%<br/>已使用: ${formatFileSize(data.usedSize)}<br/>总容量: ${data.maxSize ? formatFileSize(data.maxSize) : '无限制'}`
        } else {
          return `数量使用率: ${params.value.toFixed(2)}%<br/>已使用: ${data.usedCount}<br/>总数量: ${data.maxCount || '无限制'}`
        }
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['25%', '50%'],
        data: [
          { value: sizeUsage, name: '已使用大小' },
          { value: Math.max(0, 100 - sizeUsage), name: '剩余大小' },
        ],
        label: {
          show: true,
          formatter: '{b}: {c}%',
        },
        color: ['#1890ff', '#f0f0f0'],
      },
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['75%', '50%'],
        data: [
          { value: countUsage, name: '已使用数量' },
          { value: Math.max(0, 100 - countUsage), name: '剩余数量' },
        ],
        label: {
          show: true,
          formatter: '{b}: {c}%',
        },
        color: ['#52c41a', '#f0f0f0'],
      },
    ],
  }
})

const categoryChartOption = computed(() => {
  if (!categoryData.value.length) return {}

  return {
    title: {
      text: '分类分布',
      left: 'center',
      textStyle: { fontSize: 14 },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)',
    },
    series: [
      {
        type: 'pie',
        radius: '70%',
        data: categoryData.value.map((item) => ({
          value: item.count,
          name: item.category,
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
})

const sizeChartOption = computed(() => {
  if (!sizeData.value.length) return {}

  return {
    title: {
      text: '大小分布',
      left: 'center',
      textStyle: { fontSize: 14 },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      data: sizeData.value.map((item) => item.sizeRange),
      axisLabel: {
        rotate: 45,
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'bar',
        data: sizeData.value.map((item) => item.count),
        itemStyle: {
          color: '#722ed1',
        },
      },
    ],
  }
})

// 生成随机颜色的函数
const generateRandomColor = () => {
  const colors = [
    '#FF6B6B',
    '#4ECDC4',
    '#45B7D1',
    '#96CEB4',
    '#FFEAA7',
    '#DDA0DD',
    '#98D8C8',
    '#F7DC6F',
    '#BB8FCE',
    '#85C1E9',
    '#F8C471',
    '#82E0AA',
    '#F1948A',
    '#85C1E9',
    '#D7BDE2',
    '#A3E4D7',
    '#FAD7A0',
    '#D5A6BD',
    '#AED6F1',
    '#A9DFBF',
    '#F9E79F',
    '#D7DBDD',
    '#FADBD8',
    '#D6EAF8',
    '#E8DAEF',
    '#D1F2EB',
    '#FCF3CF',
    '#EAEDED',
    '#FDEDEC',
    '#EBF5FB',
    '#F4ECF7',
    '#E9F7EF',
  ]
  return colors[Math.floor(Math.random() * colors.length)]
}

const tagChartOption = computed(() => {
  if (!tagData.value.length) return {}

  // 计算权重范围，用于调整字体大小
  const counts = tagData.value.map((item) => item.count)
  const maxCount = Math.max(...counts)
  const minCount = Math.min(...counts)
  const countRange = maxCount - minCount || 1

  return {
    title: {
      text: '标签词云',
      left: 'center',
      top: '5%',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: (params: { name: string; value: number }) => {
        return `${params.name}<br/>出现次数: ${params.value}`
      },
    },
    series: [
      {
        type: 'wordCloud',
        sizeRange: [12, 60], // 字体大小范围
        rotationRange: [-45, 45], // 旋转角度范围
        rotationStep: 15, // 旋转步长
        gridSize: 8, // 网格大小，影响词语间距
        shape: 'circle', // 词云形状
        width: '100%',
        height: '80%',
        top: '15%',
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#333',
          },
        },
        data: tagData.value.map((item) => ({
          name: item.tag,
          value: item.count,
          textStyle: {
            color: generateRandomColor(),
            fontSize: Math.max(12, Math.min(60, 12 + ((item.count - minCount) / countRange) * 48)),
          },
        })),
      },
    ],
  }
})

const userChartOption = computed(() => {
  if (!userBehaviorData.value.length) return {}

  return {
    title: {
      text: '上传趋势',
      left: 'center',
      textStyle: { fontSize: 14 },
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: userBehaviorData.value.map((item) =>
        formatPeriod(item.period, userAnalyzeForm.timeDimension),
      ),
      axisLabel: {
        rotate: 45,
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'line',
        data: userBehaviorData.value.map((item) => item.count),
        smooth: true,
        itemStyle: {
          color: '#1890ff',
        },
        areaStyle: {
          color: 'rgba(24, 144, 255, 0.2)',
        },
      },
    ],
  }
})

const rankChartOption = computed(() => {
  if (!rankData.value.length) return {}

  return {
    title: {
      text: '空间排行',
      left: 'center',
      textStyle: { fontSize: 14 },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: (params: [{ dataIndex: number }]) => {
        const data = params[0]
        const space = rankData.value[data.dataIndex]
        return `${space.spaceName}<br/>图片数量: ${space.totalCount || 0}<br/>使用大小: ${formatFileSize(space.totalSize || 0)}`
      },
    },
    xAxis: {
      type: 'category',
      data: rankData.value.map((item) => item.spaceName),
      axisLabel: {
        rotate: 45,
      },
    },
    yAxis: {
      type: 'value',
      name: '使用大小',
      axisLabel: {
        formatter: (value: number) => formatFileSize(value),
      },
    },
    series: [
      {
        type: 'bar',
        data: rankData.value.map((item) => item.totalSize || 0),
        itemStyle: {
          color: '#fa8c16',
        },
      },
    ],
  }
})

// 方法
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatPeriod = (period: string, dimension: string): string => {
  if (dimension === 'week') {
    // 将周数格式化为更友好的显示
    const year = period.substring(0, 4)
    const week = period.substring(4)
    return `${year}年第${week}周`
  }
  return period
}

const loadSpaceList = async () => {
  if (queryForm.queryType !== 'space') return

  try {
    spacesLoading.value = true
    const response = await listSpaceVOByPage({
      current: 1,
      pageSize: 20,
      userId: userStore.loginUser?.id ? String(userStore.loginUser.id) : undefined,
    })
    // Handle different possible response structures
    const pageData = response.data?.data || response.data
    spaceList.value = pageData?.records || []

    // 如果有空间，自动选择第一个空间
    if (spaceList.value.length > 0) {
      queryForm.spaceId = String(spaceList.value[0].id)
    }
  } catch (error) {
    console.error('获取空间列表失败:', error)
    message.error('获取空间列表失败')
  } finally {
    spacesLoading.value = false
  }
}

const buildAnalyzeRequest = () => {
  const baseRequest = {
    queryAll: queryForm.queryType === 'all',
    queryPublic: queryForm.queryType === 'public',
    spaceId: queryForm.queryType === 'space' ? queryForm.spaceId : undefined,
  }
  return baseRequest
}

const loadAnalyzeData = async () => {
  const request = buildAnalyzeRequest()

  try {
    loading.value = true

    // 并行加载所有分析数据
    const [usageResponse, categoryResponse, sizeResponse, tagResponse, userResponse] =
      await Promise.all([
        spaceAnalyzeApi.getUsageAnalyze(request),
        spaceAnalyzeApi.getCategoryAnalyze(request),
        spaceAnalyzeApi.getSizeAnalyze(request),
        spaceAnalyzeApi.getTagAnalyze(request),
        spaceAnalyzeApi.getUserAnalyze({
          ...request,
          userId: userStore.loginUser?.id ? String(userStore.loginUser.id) : undefined,
          timeDimension: userAnalyzeForm.timeDimension,
        }),
      ])

    usageData.value = usageResponse.data
    categoryData.value = categoryResponse.data
    sizeData.value = sizeResponse.data
    tagData.value = tagResponse.data
    userBehaviorData.value = userResponse.data

    // 如果是管理员，加载排行数据
    if (userStore.isAdmin) {
      const rankResponse = await spaceAnalyzeApi.getRankAnalyze({ topN: rankForm.topN })
      rankData.value = rankResponse.data
    }

    hasData.value = true
    message.success('数据分析完成')
  } catch (error) {
    console.error('分析数据失败:', error)
    message.error('分析数据失败')
  } finally {
    loading.value = false
  }
}

const handleQuery = async () => {
  await loadAnalyzeData()
}

const handleQueryTypeChange = async () => {
  queryForm.spaceId = undefined
  hasData.value = false

  if (queryForm.queryType === 'space') {
    await loadSpaceList()
  }
}

const handleTimeDimensionChange = async () => {
  if (hasData.value) {
    const request = buildAnalyzeRequest()
    try {
      loading.value = true
      const response = await spaceAnalyzeApi.getUserAnalyze({
        ...request,
        userId: userStore.loginUser?.id ? String(userStore.loginUser.id) : undefined,
        timeDimension: userAnalyzeForm.timeDimension,
      })
      userBehaviorData.value = response.data
    } catch (error) {
      console.error('更新用户行为数据失败:', error)
      message.error('更新用户行为数据失败')
    } finally {
      loading.value = false
    }
  }
}

const handleRankChange = async () => {
  if (hasData.value && userStore.isAdmin) {
    try {
      loading.value = true
      const response = await spaceAnalyzeApi.getRankAnalyze({ topN: rankForm.topN })
      rankData.value = response.data
    } catch (error) {
      console.error('更新排行数据失败:', error)
      message.error('更新排行数据失败')
    } finally {
      loading.value = false
    }
  }
}

// 生命周期
onMounted(async () => {
  // 初始化时加载空间列表
  await loadSpaceList()

  // 自动加载分析数据
  if (queryForm.queryType === 'space' && queryForm.spaceId) {
    await loadAnalyzeData()
  }
})

// 监听查询类型变化
watch(() => queryForm.queryType, handleQueryTypeChange)
</script>

<style scoped>
.space-analyze-container {
  padding: 24px;
}

.query-condition-form {
  margin-bottom: 24px;
}

.dashboard-container {
  min-height: 600px;
}

/* 使用情况文字显示样式 */
.usage-display-container {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 20px;
}

.usage-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 200px;
  opacity: 0;
  transform: translateY(20px);
}

.usage-item.animate {
  opacity: 1;
  transform: translateY(0);
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.usage-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.usage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.icon-circle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: shimmer 2s infinite;
}

.storage-icon .icon-circle {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  color: white;
}

.count-icon .icon-circle {
  background: linear-gradient(135deg, #52c41a, #73d13d);
  color: white;
}

.icon-circle svg {
  width: 24px;
  height: 24px;
  z-index: 1;
}

.usage-content {
  flex: 1;
}

.usage-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.usage-value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  position: relative;
}

.storage-value {
  color: #1890ff;
}

.count-value {
  color: #52c41a;
}

.count-number {
  font-size: 28px;
}

.count-unit {
  font-size: 16px;
  margin-left: 4px;
  color: #666;
}

.usage-divider {
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e8e8e8, transparent);
  margin: 8px 0;
}

/* 数字增长动效 */
.count-up {
  animation: countUp 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 图表容器样式 */
.usage-chart-container,
.category-chart-container,
.size-chart-container,
.tag-chart-container,
.user-chart-container,
.rank-chart-container {
  height: 300px;
}

.usage-chart,
.category-chart,
.size-chart,
.tag-chart,
.user-chart,
.rank-chart {
  height: 100%;
  width: 100%;
}

/* 动画定义 */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes countUp {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.no-data-container {
  text-align: center;
  padding: 60px 0;
}

.user-behavior-form,
.rank-form {
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .space-analyze-container {
    padding: 16px;
  }

  .usage-display-container {
    height: 250px;
    gap: 16px;
    padding: 16px;
  }

  .usage-item {
    min-width: 180px;
    padding: 12px 16px;
    gap: 12px;
  }

  .icon-circle {
    width: 40px;
    height: 40px;
  }

  .icon-circle svg {
    width: 20px;
    height: 20px;
  }

  .usage-value {
    font-size: 20px;
  }

  .count-number {
    font-size: 22px;
  }

  .count-unit {
    font-size: 14px;
  }

  .usage-chart-container,
  .category-chart-container,
  .size-chart-container,
  .tag-chart-container,
  .user-chart-container,
  .rank-chart-container {
    height: 250px;
  }
}
</style>
